import "../style/main.css";
import { Scene, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh, AxesHelper, Vector3, PerspectiveCamera, CameraHelper, Matrix4, Raycaster, Vector2 } from "three";
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
import { ComposeControl } from "./ComposeControls.js";
import { PCDLoader } from 'three/addons/loaders/PCDLoader.js';
import SlamCamera from "./slamcamera.js";

const scene = new Scene();
const gui = new GUI();

const renderer = new WebGLRenderer({
  antialias: true,
  alpha: true,
  logarithmicDepthBuffer: true,
});

renderer.setClearColor(0x000000);
const canvas = renderer.domElement;
document.body.appendChild(canvas);

const res = await fetch("./28901/image/19452835.json");
const options = await res.json();
const sc = new SlamCamera(options);
const pos = new Vector3(-0.9146023000743595, 12.222356135022144, -0.24656125194833223);
const uv = sc.Compute(pos);
console.log(uv);

// debug camera
const dcamera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5);
// dcamera.matrix = new Matrix4().makeRotationX(Math.PI * 0.5);
dcamera.rotation.x = Math.PI * 0.5;
dcamera.matrixWorld = sc._external.clone();
dcamera.updateMatrix();
dcamera.updateProjectionMatrix();
dcamera.updateMatrixWorld(true);
const helper = new CameraHelper(dcamera);
helper.updateMatrix();
helper.updateMatrixWorld(true);
scene.add(helper);

gui.add(dcamera.rotation, "x", -Math.PI, Math.PI)
  .onChange(v => {
    const d = dcamera;
    dcamera.updateMatrix();
    dcamera.updateMatrixWorld(true);
  })

const controls = new ComposeControl({ canvas: canvas, scaler: true })
const axesHelper = new AxesHelper(5);
scene.add(axesHelper);
const loader = new PCDLoader();
loader.load(
  // resource URL
  './28901/28901.304836.pcd',
  // called when the resource is loaded
  function (points) {
    // points.material.size = 1;
    lxspts = points;
    scene.add(points);

  },
  // called when loading is in progress
  function (xhr) {

    console.log((xhr.loaded / xhr.total * 100) + '% loaded');

  },
  // called when loading has errors
  function (error) {

    console.log('An error happened');

  }
);

const raycaster = new Raycaster();
raycaster.params.Points.threshold = 0.5;
const pointer = new Vector2();
function onPointerMove(event) {
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
let intersects, lxspts;
document.addEventListener("pointermove", onPointerMove);
document.addEventListener("click", () => {
  console.log(intersects);
});

render(0);

const geometry = new BoxGeometry(100, 100, 100);
const material = new MeshBasicMaterial({ color: 0x00ff00 });
const cube = new Mesh(geometry, material);
// scene.add(cube);
const OrthProp = {
  orth: false,
}

function resize(renderer) {
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  controls.HandleResize();
  return needResize;
}

function render(time) {
  if (resize(renderer)) {
    controls.UpdateCamera();
  }

  if (lxspts) {
    raycaster.setFromCamera(pointer, controls.Camera);
    intersects = raycaster.intersectObject(lxspts);
    if (intersects.length > 0) {
      // console.log(intersects);
    }
  }

  helper.update();
  controls.Update();
  renderer.render(scene, controls.Camera);
  requestAnimationFrame(render);
}
